<template>
    <div>
        <h3>------------computed--------------</h3>
        <div>
            姓：<input type="text" v-model="xm.x">
        </div>
        <div>
            名：<input type="text" v-model="xm.m">
        </div>
        <!-- 通过计算属性实现姓名计算拼接 -->
        <div>
            姓名：<input type="text" v-model="xm.name">
        </div>
    </div>
</template>

<script>

// 1.引入api方法
import { reactive, computed } from "vue"
export default {
    setup() {

        let xm = reactive({
            x: "李",
            m: "白"
        })

        // 通过计算属性获取姓名全称呼---函数写法
        // xm.name = computed(() => {
        //     return xm.x + '-' + xm.m
        // })



        // 通过计算属性获取姓名全称呼---对象写法
        xm.name = computed({
            // 计算读取name触发
            get() {
                return xm.x + '-' + xm.m
            },
            // 修改动态属性name的时候触发
            set(newV) {
                // 获取xm
                let [x, m] = newV.split('-')
                xm.x = x
                xm.m = m
            }
        })

        // console.dir(xm.name)

        return {
            xm
        }



    },
    // computed: {
    //     count() { },
    //     sum: {
    //         get() { },
    //         set() { }
    //     }
    // }
};
</script>

<style scoped></style>
